import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { NavLink } from 'react-router-dom'
import TopicTabs from './TopicTabs'

export default function HomeTabs() {
    const [topicWidth, setTopicWidth] = useState<any>()

    useEffect(() => {}, [])

    useEffect(() => {
        localStorage.getItem('account')
            ? setTopicWidth(((136 + 28 + 41 + 17) / $(`.${style.container}`).outerWidth(true)!) * 100 + 'vw')
            : setTopicWidth(((76 + 28 + 41 + 17) / $(`.${style.container}`).outerWidth(true)!) * 100 + 'vw')
    }, [])
    return (
        <div
            id={'home__tabs'}
            className={style.container}
            style={{
                ['--topic-width' as any]: topicWidth
            }}>
            <div className={style.home}>
                <NavLink to="/editorial" className={style.link}>
                    <span>摄影社区</span>
                </NavLink>
                {localStorage.getItem('account') ? (
                    <NavLink to="/following" className={style.link}>
                        <span>关注</span>
                    </NavLink>
                ) : (
                    ''
                )}
            </div>
            <div className={style.line} />
            <div className={style.topic__tabs}>
                <TopicTabs />
            </div>
            <NavLink to="/topic/all" id="all" className={style.link}>
                <span>全部</span>
            </NavLink>
        </div>
    )
}
